<template>
    <div class="box_alarm">
        <MoodalTitle :title="'历史立案案件'">
            <div class="postion_reletive">
                <el-select @change="changeClick" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </MoodalTitle>
        <div class="box_charts" ref="intelligent"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import { ZhShianalysis } from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle },
    data() {
        return {
            options: [{
                value: '2023',
                label: '2023'
            },
            {
                value: '2024',
                label: '2024'
            }],
            value: '2023',
            Month: [], //月份
            sum: [], //数量
        }
    },
    mounted() {
        this.intelligentfData()
    },
    methods: {
        // 历史立案案件
        intelligentfData() {
            let page = {
                dateType: this.value
            }
            ZhShianalysis.historyCaseAPI(page).then(res => {
                console.log(res, '历史立案案件');
                if (res.code == 200) {
                    res.data.forEach(item => {
                        this.Month.push(item.month)
                        this.sum.push(item.sum)
                    })
                    this.intelligentfication()
                }
            })
        },
        intelligentfication() {
            let charts = echarts.init(this.$refs.intelligent)
            let dataC1 = this.sum;
            let xData = this.Month;

            let option = {
                grid: {
                    left: '5%',
                    right: '2%',
                    top: '10%',
                    bottom: '15%',
                },
                legend: {
                    textStyle: {
                        color: '#A9DDEE',
                    },
                    orient: 'horizontal',
                    top: '5',
                    right: '5%',
                    itemGap: 10,
                    itemWidth: 12,
                    itemHeight: 7,
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#57617B',
                        },
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //顶头显示
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3585d5',
                        },
                    },

                    axisTick: {
                        show: false,
                        // alignWithLabel: true,
                        lineStyle: {
                            color: '#3585d5',
                        },
                    },
                    axisLabel: {
                        fontSize: 14,
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    name: '(件)',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3585d5',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'rgba(36, 173, 254, 0.2)',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 14,
                    },
                    boundaryGap: true,
                },
                series: [
                    {
                        // name: '上报次数',
                        type: 'line',
                        // stack: '总量',
                        smooth: true,
                        symbol: 'none',
                        showSymbol: true,
                        symbolSize: 80,
                        itemStyle: {
                            normal: {
                                color: '#00D6FB',
                                lineStyle: {
                                    color: '#00D6FB', //线的颜色
                                    width: 2,
                                },
                                areaStyle: {
                                    //color: '#94C9EC'
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0.3,
                                            color: 'rgba(56, 177, 193, .6)',
                                        },

                                        {
                                            offset: 1,
                                            color: 'rgba(30, 29, 40, .1)',
                                        },
                                    ]),
                                },
                            },
                        },
                        data: dataC1,
                    },
                ],
            };

            charts.setOption(option)
        },
        changeClick(e) {
            console.log(e);
            this.Month = []
            this.sum = []
            this.value = e
            this.intelligentfData()
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    position: relative;
    width: 60.7rem;
    height: 56.6rem !important;
    margin-bottom: 1.9rem;
}

.postion_reletive {
    position: absolute;
    // width: 25rem;
    right: 3.5rem;
    top: 1.4rem;

    /deep/ .el-input__inner {
        padding-left: 2rem;
        width:  10rem;
        height: 3rem;
        background: rgba(4, 11, 32, 0.7);
        border: 1px solid #16d0ff;
        box-shadow: 0px 0px 1.9rem 1px #173c90;
        // border-radius: 8px;
        font-size:  1.8rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.7;
    }

    /deep/ .el-icon-arrow-up:before {
        content: '';
        background: url('../../../../assets/images/yingpanshidian/sanjiao.png') center center no-repeat;
        background-size: 1rem 8px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 80%;
        transform: translate(-80%, -50%) rotate(180deg)
    }
}

.box_charts {
    width: 45.6rem;
    height: 50.7rem;
}
</style>